<template>
  <div class="main">
    <Header class="header"></Header>
    <Main />
    <Footer />
  </div>
</template>

<script setup lang="ts">
import Header from "@/components/Layout/Header.vue"
import Main from "@/components/Layout/Main.vue"
import Footer from "@/components/Layout/Footer.vue"
import { getCurrentPositionsByBaiDui } from "@/utils/getCurrentPosition"

import useScalePage from "@/hooks/useScalePage"
import { onMounted, ref } from "vue"
import { messageReminder } from "@/utils/notificationHint"
// 大屏适配
useScalePage({
  targetX: 1536,
  targetY: 703,
  targetRatio: 1536 / 703
})

const longitude = ref(116.397428)
const latitude = ref(39.90923)

function saveLocalInfo(longitude: number, latitude: number) {
  messageReminder({
    message: `获取本地位置信息成功！`,
    type: "success"
  })
  localStorage.setItem("longitude", longitude + "")
  localStorage.setItem("latitude", latitude + "")
}

onMounted(() => {
  getCurrentPositionsByBaiDui()
    .then((res) => {
      // console.log(res.center)
      longitude.value = res.center.lng
      latitude.value = res.center.lat

      saveLocalInfo(longitude.value, latitude.value)
    })
    .catch(() => {
      saveLocalInfo(longitude.value, latitude.value)
    })
})
</script>

<style lang="less" scoped></style>
